<template>
	<div class="Login">
		<el-container class="Login-el-container-img">
			<el-main class="Login-centen">
				<main class="main  mainimg">
					<div class="main-user">
						<div class="main-touxiang">
							<div class="main-user-myimg" @click="Logins">
								<img :src="touxiang" alt="">
							</div>
						</div>
						<div class="main-img">
							一生爱意起长虹
						</div>
						<div class="top-social">
							<div class="QQ">
								<a href="" style="color: rgb(26, 182, 255);">
									<i class="icon iconfont icon-qq"></i>
								</a>
							</div>
							<div class="Gitee">
								<a href="" style="color: rgb(216, 30, 6)">
									<i class="icon iconfont icon-gitee-fill-round"></i>
								</a>
							</div>
							<div class="GitHub">
								<a href="">
									<i class="icon iconfont icon-github"></i>
								</a>
							</div>
							<div class="CSDN">
								<a href="" style="color: red;">
									<i class="icon iconfont icon-csdn"></i>
								</a>
							</div>
						</div>
					</div>
				</main>
			</el-main>
		</el-container>
		<el-container class="Login-el-container">
			<div class="site-content">
				<div class="site-main">
					<h1 class="section-title">最新文章</h1>
					<article class="post-list" v-for="(lista,index) in list" :key="index">
						<div class="post-entry">
							<div class="post_header">
								<div class="post_title">
									<a @click="$router.push({path:'/article',query:{id:lista.id}})">
										<font>
											<font>
												{{lista.title}}
											</font>
										</font>
									</a>
								</div>
							</div>
							<div class="post_center">
								<div class="post_entry">
									<font>
										<font>
											{{lista.description}}
										</font>
									</font>
								</div>
							</div>
							<div class="post_footer">
								<div class="post_tag"></div>
								<div class="post_info">
									<li>
										<span class="post_icon">
											<i class="el-icon-user"></i>
										</span>
										<span class="post_en">夏野</span>
									</li>
									<li>
										<span class="post_icon">
											<i class="el-icon-time"></i>
										</span>
										<span class="post_en">{{ lista.created }}</span>
									</li>
								</div>
							</div>
						</div>
					</article>
				</div>
			</div>
			<!-- 登录弹窗 -->
			<div v-show="dialogVisible" class="getPopup" center id="diaolog" @click="changepou(1)" />
			<div class="ms-login" v-show="dialogVisible" id="diaologtext">
				<div class="ms-title">登录个人管理</div>
				<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
					<el-form-item prop="username">
						<el-input v-model="param.username" placeholder="username">
							<el-button slot="prepend" icon="el-icon-lx-people"></el-button>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" placeholder="password" v-model="param.password" @keyup.enter.native="submitForm()">
							<el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
						</el-input>
					</el-form-item>
					<div class="login-btn">
						<el-button type="primary" @click="submitForm()">登录</el-button>
					</div>
				</el-form>
			</div>
		</el-container>

	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "Login",
		computed: {
			...mapState(
				// 映射 this.routertitle 为 this.$store.state.routertitle
				['Authorization'],
			),
		},
		data() {
			return {
				touxiang: require('../static/toux.jpg'),
				list: [],
				param: {
					username: '',
					password: '',
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
				},
				dialogVisible: false
			}
		},
		methods: {
			...mapMutations({
				saveAuthorization: 'saveAuthorization' // 将 `this.reset()` 映射为 `this.$store.commit('setRefreshSearch')`
			}),
			getwenzhang() {
				this.$api.get(
					'/blogs'
				).then(res => {
					if (res.data.code == '1111') {
						this.list = res.data.data.records
						console.log(this.list)
					}
				})
			},
			Logins() {

				if (this.Authorization != '') {
					return
				}
				this.dialogVisible = true
				this.changepou()
			},
			changepou(i) {
				if (i) {
					let cssStr = "overflow-y: auto; height: auto;";
					// document.getElementsByTagName('html')[0].style.cssText = cssStr;
					this.param.username = ''
					this.param.password = ''
					document.body.style.cssText = cssStr;
					this.timer = setTimeout(() => { //设置延迟执行
						this.dialogVisible = false
					}, 200);
					document.getElementById('diaolog').classList.remove('top_right_tranform')
					document.getElementById('diaologtext').classList.remove('ms-logindh')
				} else {
					let cssStr = "overflow-y: hidden; height: 100%;";
					// document.getElementsByTagName('html')[0].style.cssText = cssStr;
					document.body.style.cssText = cssStr;
					this.timer = setTimeout(() => { //设置延迟执行
						document.getElementById('diaolog').classList.add('top_right_tranform')
						document.getElementById('diaologtext').classList.add('ms-logindh')
					}, 10);
				}
			},
			submitForm() {
				if (this.param.username == '') {
					this.$message({
						message: '请填写用户名',
						type: 'warning'
					});
					return
				}
				if (this.param.password == '') {
					this.$message({
						message: '请填写密码',
						type: 'warning'
					});
					return
				}
				this.$api.post(
					'/login', {
						username: this.param.username,
						password: this.param.password
					}).then(res => {
					this.param.username = ''
					this.param.password = ''
					this.dialogVisible = false
					this.changepou(1)
					if (!res) {
						return
					}
					if (res.data.code == '1111') {
						this.$message.success('登录成功');
					}
				})
			},
		},
		mounted() {
			this.getwenzhang()
            this.saveAuthorization(this.Authorization ?? '')
			console.log(this.Authorization)
		}
	}
</script>

<style scoped lang="less">
	.Login {
		.Login-el-container {
			height: calc(100vh - 80px);

			.Login-centen {
				line-height: 1;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.el-header,
	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #D3DCE6;
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		line-height: 160px;
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}

	main {
		margin: auto;
		height: 550px;
		overflow-x: hidden;
		overflow-y: hidden;

		&::-webkit-scrollbar {
			width: 0 !important;
		}

		&::-webkit-scrollbar {
			width: 0 !important;
			height: 0;
		}

		//padding: 59px 29px;
		//border-radius: .3em;
		text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
		box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset,
		0 .3em 1em rgba(0, 0, 0, 0.12);
		font: 150%/1.6 Baskerville,
		Palatino,
		serif;

	}

	main,
	main>div::before {
		background: url("../static/YxaLMq.jpg");
		background-size: cover;
		background-attachment: fixed;
	}

	.main-img {
		color: #000;
		padding: 16px;
		hyphens: auto;
		background: hsla(0, 0%, 100%, .5);
		overflow: hidden;
		position: relative;
		border-radius: 2px;
		width: 450px;
		font-size: 16px;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: -1;
			filter: blur(10px);
			margin: -30px;
		}

		cite {
			font-style: normal;
		}

		color: #53868b;
	}

	main footer {
		text-align: right;
	}

	.main-user {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}

	.mainimg {
		height: 510px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.main-user-myimg {
		width: 80px;
		height: 80px;
		position: relative;

		img {
			width: 100%;
			height: 100%;
			border-radius: 999px;
		}

		&::before {
			width: 100%;
			content: "";
			height: 50px;
		}
	}

	.main-touxiang {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 140px;
	}

	.site-content {
		padding: 0 10px;
		max-width: 800px;
		animation: main 1.5s;
		margin: 0 auto;

		.site-main {
			padding-top: 80px;

			.section-title {
				color: #757575;
				font-size: 18px;
				font-weight: 400;
				padding-bottom: 15px;
				border-bottom: 1px dashed #ececec;
			}

			.post-list {
				&:hover {
					box-shadow: 2px 2px 8px 1px #b0b0b0;
				}

				margin: 0 0 4% 0;
				position: relative;

				.post-entry {
					box-shadow: 2px 2px 8px 1px rgb(20 20 20 / 15%);
					width: 100%;
					background-color: #fff;
					border-radius: 4px;
					box-shadow: 2px 2px 8px 1px #e2e2e2;

					.post_header {
						border-left: 5px solid #4d4d4d;
						padding: 30px 0 15px 25px;
						padding-left: 7.6923%;

						.post_title {
							color: #696969;
							margin-left: 0;
							font-weight: 300;
							line-height: 35px;
							margin-bottom: 20px;
							font-size: 26px;
						}
					}

					.post_center {
						line-height: 1.8em;
						padding-right: 7.6923%;
						padding-left: 7.6923%;

						.post_entry {
							background: #ddd;
							border-left: 5px solid #ccc;
							padding: 15px 20px;
							border-left: 5px solid #657b83;
							background: #f6f6f6;
							font-size: 18px;
							color: #6f6f6f;
							overflow: hidden;
						}
					}

					.post_footer {
						padding-top: 15px;
						margin: 30px 7.6923% 0;
						min-height: 72px;
						border-top: 1px solid #ddd;

						.post_info {
							margin-top: 10px;
							padding-bottom: 20px;

							li {
								font-size: 13px;
								display: inline-block;
								padding-right: 15px;
								padding-left: 5px;

								.post_en {
									margin-left: 5px;
									font-size: 17px;
									color: #6f6f6f;
								}
							}
						}
					}
				}
			}
		}
	}

	.top-social {
		height: 32px;
		margin-top: 30px;
		list-style: none;
		width: 100%;
		display: flex;
		justify-content: center;

		div {
			float: left;
			margin-right: 10px;
			height: 32px;
			/* line-height: 32px; */
			text-align: center;
			width: 32px;
			background: #fff;
			border-radius: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			a {
				display: flex;
			}
		}

	}

	.ms-title {
		width: 100%;
		line-height: 50px;
		text-align: center;
		font-size: 20px;
		color: #fff;
		border-bottom: 1px solid #ddd;
	}



	.ms-content {
		padding: 30px 30px;
	}

	.login-btn {
		text-align: center;
	}

	.login-btn button {
		width: 100%;
		height: 36px;
		margin-bottom: 10px;
	}

	.login-tips {
		font-size: 12px;
		line-height: 30px;
		color: #fff;
	}

	/deep/.el-dialog--center {
		margin-top: 50vh !important;
	}

	/deep/.el-dialog__header {
		background-color: #ff000000;
		border: none;
		opacity: 0;
	}

	.getPopup {
		opacity: 0;
		background: #000;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		transition: opacity 200ms;
	}

	.ms-login {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 350px;
		margin: -190px 0 0 -175px;
		border-radius: 5px;
		background: rgba(255, 255, 255, 0.3);
		overflow: hidden;
		opacity: 0;
		transition: opacity 200ms;
	}

	.ms-logindh {
		opacity: 1;
	}

	.top_right_tranform {
		opacity: 0.5;
	}
</style>
